<template>
  <div>
    <!-- 文章 -->
    <div class="articlePost" v-if="postData.type==1">
      <div class="header">
        <span class="iconfont iconjiantou2" @click="handleBack"></span>
        <div class="logWrapper">
          <span class="iconfont iconnew"></span>
        </div>
        <div
          class="btnlike"
          :class="{hasFollow:postData.has_follow,notLike:!postData.has_follow}"
          @click="handleLike"
        >{{postData.has_follow?'已关注':'关注'}}</div>
      </div>
      <div class="title">{{postData.title}}</div>
      <div class="info">
        <span>{{postData.user.nickname}}</span>
        <span class="time">{{postData.create_date.split("T")[0]}}</span>
      </div>
      <div class="content" v-html="postData.content"></div>
    </div>
    <!-- 视频 -->
    <div class="videoPost" v-if="postData.type==2">
      <video
        src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
        controls
        poster="..//assets/01.jpg"
      ></video>
      <div class="info">
        <img src="../assets/01.jpg" alt class="pt" />
        <div class="name">{{postData.user.nickname}}</div>
        <div
          class="btnlike"
          :class="{hasFollow:postData.has_follow,notLike:!postData.has_follow}"
          @click="handleLike"
        >{{postData.has_follow?'已关注':'关注'}}</div>
      </div>
      <div class="title">{{postData.title}}</div>
    </div>
    <!-- 点赞与分享 -->
    <div class="btns">
      <div class="btn dainzan" :class="{hasLike:postData.has_like}" @click="dianzan">
        <span class="iconfont icondianzan">{{postData.like_length}}</span>
      </div>
      <div class="btn weixin">
        <span class="iconfont iconweixin"></span>
        微信
      </div>
    </div>
    <div class="comments">
      <h2>精彩跟帖</h2>
      <div class="list" v-if="commentList.length>0">
        <CommentMain v-for="comment in commentList" :key="comment.id" :commentData="comment"></CommentMain>
        <div class="BtnmoreConent" @click="$router.push('/morecomment?id='+$route.query.id)">更多跟帖</div>
      </div>
      <div v-else class="zanwu">暂无跟帖,抢占沙发</div>
    </div>
    <InputDom @reloadComments="loadComments"></InputDom>
  </div>
</template>

<script>
import CommentMain from "../components/Main";
import InputDom from "../components/inputDom";

export default {
  components: {
    CommentMain,
    InputDom,
  },
  data() {
    return {
      postData: {},
      commentList: [],
    };
  },
  created() {
    // console.log(this.$route.query.id);
    this.$axios({
      url: "/post/" + this.$route.query.id,
    }).then((res) => {
      //   console.log(res.data);
      this.postData = res.data.data;
    });
    this.loadComments();
  },
  methods: {
    // 封装刷新输入框
    loadComments() {
      // 获取文章数据,同时获取评论列表
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
      }).then((res) => {
        if (res.data.data.length > 3) {
          res.data.data.length = 3;
        }

        // 把数据渲染到数组中
        this.commentList = res.data.data;
        // console.log(res.data.data);
      });
    },
    //   关注事件
    handleLike() {
      //   console.log("进来啦");
      //   关注与取消关注都是这个函数
      // 请求接口不同
      if (this.postData.has_follow) {
        this.$axios({
          //  url的id是文章id,现在关注针对的是用户
          url: "/user_unfollow/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          if (res.data.message == "取消关注成功") {
            this.postData.has_follow = false; //has_follow 判断是否关注
          }
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          if (res.data.message == "关注成功") {
            this.postData.has_follow = true;
          }
        });
      }
    },
    // 点赞事件
    dianzan() {
      // 点赞加一,取消减一
      this.$axios({
        // url: "/post_like/" + this.postData.user.id,
        url: "/post_like/" + this.$route.query.id,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.message == "点赞成功") {
          this.postData.has_like = true; //has_like 判断是否点赞
          this.postData.like_length++;
        } else if (res.data.message == "取消成功") {
          this.postData.has_like = false;
          this.postData.like_length--;
        }
      });
    },
    // 返回上级
    handleBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
// 文章
.articlePost {
  padding: 0 10/360 * 100vw;
  .header {
    display: flex;
    align-items: center;
    .iconnew {
      font-size: 54/360 * 100vw;
      padding-left: 10/360 * 100vw;
    }
  }
  .logWrapper {
    flex: 1;
  }
  .title {
    font-size: 18/360 * 100vw;
    font-weight: bold;
  }
  .info {
    font-size: 14/360 * 100vw;
    color: #888;
    margin: 10/360 * 100vw 0;
    .time {
      margin-left: 20/360 * 100vw;
    }
  }
  .content {
    /deep/ img {
      max-width: 100%;
    }
  }
}
// 视频
.videoPost {
  .info {
    display: flex;
    padding: 10/360 * 100vw;
    .pt {
      width: 26/360 * 100vw;
      height: 26/360 * 100vw;
      object-fit: cover;
      border-radius: 50%;
    }
    .name {
      flex: 1;
      padding-left: 10/360 * 100vw;
    }
  }
  .title {
    padding-left: 10/360 * 100vw;
    font-size: 18/360 * 100vw;
  }
  video {
    width: 100%;
  }
}
.btns {
  display: flex;
  justify-content: space-around;
  margin: 40/360 * 100vw;
  .btn {
    line-height: 30/360 * 100vw;
    border: 1px solid #888;
    padding: 0 10/360 * 100vw;
    border-radius: 15/360 * 100vw;
    &.hasLike {
      border-color: rgb(239, 251, 6);
      color: rgb(239, 251, 6);
    }
  }
  .iconweixin {
    color: #00c800;
  }
}
.btnlike {
  line-height: 30/360 * 100vw;
  border: 1px solid #888;
  padding: 0 10/360 * 100vw;
  border-radius: 16/360 * 100vw;
  color: #888;
  &.notLike {
    background: red;
    border-color: red;
    color: #fff;
  }
}
.comments {
  border-top: 4px solid #bbb;
  h2 {
    text-align: center;
    margin: 50/360 * 100vw 0;
  }
  .zanwu {
    text-align: center;
    font-size: 16/360 * 100vw;
    color: #999;
  }
  .BtnmoreConent {
    width: 100/360 * 100vw;
    text-align: center;
    margin: 120/360 * 100vw auto;
    margin-top: 36/360 * 100vw;
    font-size: 14/360 * 100vw;
    line-height: 24/360 * 100vw;
    border: 1px solid #888;
    border-radius: 12/360 * 100vw;
  }
}
</style>